import Taro, {Component} from '@tarojs/taro'
import {View, Image} from '@tarojs/components'
import classNames from 'classnames'
import './index.scss'

interface IProps {
  list: Array<Object>
  storeInfo: Object
  goodsInfo: Object
}

let startX: any
let startY: any
let endX: any
let endY: any
let moveFlag = false
export default class Index extends Component<IProps, {}> {
  state: any

  static options = {
    addGlobalClass: true
  }

  constructor(props) {
    super(...arguments)
    this.state = {
      number: 0,
      coupons: props.list
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      coupons: nextProps.list
    })
  }

  //  监听开始触摸事件
  onTouchStart (e) {
    startX = e.touches[0].pageX
    startY = e.touches[0].pageY
    moveFlag = true
  }

  // 触摸移动事件
  onTouchMove (k, coupons, e) {
    endX = e.touches[0].pageX // 获取触摸时的原点
    endY = e.touches[0].pageY // 获取触摸时的原点
    if (moveFlag) {
      const num = Math.abs(endY - startY) < 50
      if (num && endX - startX > 50) {
        this.onCardMove(k, coupons,'right-tran')
        moveFlag = false
      }
      if (num && startX - endX > 50) {
        this.onCardMove(k, coupons,'left-tran')
        moveFlag = false
      }
    }
  }

  onTouchEnd () {
    moveFlag = true
  }

  //  卡片移动
  onCardMove (k, coupons, c) {
    let {number}: any = this.state
    ++number
    const arr = []
    coupons.map((coupon, key) => {
      if (key === k) {
        coupon.direction = c
      }
      if (number === coupons.length) {
        delete coupon.direction
      }
      // @ts-ignore
      arr.push(coupon)
    })
    number = number === coupons.length ? 0 : number
    this.setState({
      number: number,
      coupons: arr
    })
  }

  //  获取核销码数组
  getBarCodeArr (barCode) {
    const barCodeArr = barCode.split('')
    const arr = []
    let str = ''
    barCodeArr.map((num, ind) => {
      str = str + num
      if ((ind + 1) % 5 === 0 || (ind + 1) === barCodeArr.length) {
        // @ts-ignore
        arr.push(str)
        str = ''
      }
    })
    return arr
  }

  render() {
    const {number, coupons=[]} = this.state
    const {storeInfo, goodsInfo}:any = this.props

    return <View className='order-voucher-one'>
      <View className='coupon-card coupon-list'>
        {coupons.map((coupon, k) => {
          return (<View
            key={coupon.id}
            className={classNames('list-item', coupon.direction, k===number && 'active', k===(number + 1) && 'active-one', k===(number + 2) && 'active-two', )}
            style={`z-index: ${500 - k};margin-top: -${Math.abs(k - number) * 40}px;`}
            onTouchStart={this.onTouchStart.bind(this)}
            onTouchMove={this.onTouchMove.bind(this, k, coupons)}
            onTouchEnd={this.onTouchEnd.bind(this)}>
            <View className='coupon-info'>
              <View className='basis-info d-f a-i-c f-d-c j-c-b'>
                <View className='goods-info'>
                  <View className='store-img'>
                    <Image src={storeInfo.logo} />
                  </View>
                  <View className='store-name f-s-24'>{storeInfo.name}</View>
                  <View className='goods-name f-s-30 t-o-e'>{goodsInfo.name}</View>
                  <View className='store-name f-s-24'>菜品三选一</View>
                </View>
                <View className='qr-code-info'>
                  <View className='verify-code d-f'>
                    <Image src={coupon.qrCode} />
                    <View className='cover-img d-f a-i-c j-c-c'>
                      {/*<Image src='niubenben.oss-cn-shanghai.aliyuncs.com/platform-img/image/ended.png' />*/}
                    </View>
                  </View>
                  <View className='bar-code d-f bnn-number'>
                    {this.getBarCodeArr(coupon.barQrcode).map((code) => {
                      return (<View key={code} className='code'>{code}</View>)
                    })}
                  </View>
                </View>
              </View>
              <View className='segmentation d-f a-i-c'>
                <View className='cut-off-rule' />
              </View>
              <View className='info-bottom d-f f-d-c a-i-c j-c-b'>
                <View className='verify-content d-f f-d-c j-c-c'>
                  {/*<View className='verify-status f-s-24'>核销状态：未核销</View>*/}
                  {/*<View className='verify-time f-s-24'>核销时间：--</View>*/}
                  <View className='verify-status f-s-22'>核销状态：已核销</View>
                  <View className='verify-time f-s-22'>核销时间：2019-12-12 12:12</View>
                  <View className='verify-people f-s-22'>核销人员：输码核销</View>
                </View>
                <View className='verify-button dashed d-f a-i-c j-c-c f-s-28'>自助核销</View>
              </View>
            </View>
          </View>)
        })}
      </View>
    </View>
  }
}
